<template>
    <div class="loading-animation">
        <div class="loading">  
            <span></span>  
            <span></span>  
            <span></span>  
            <span></span>  
            <span></span>  
        </div>
        <div class="text" v-if="showText">正在加载中</div> 
    </div>
</template>

<script>
export default {
    props:{
        showText:{
            type:Boolean,
            default:false
        }
    }
}
</script>

<style lang="less" scoped>
.loading-animation{
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.loading{   
    width: 80px;   
    height: 20px;
    display: flex;
    justify-content: space-between;
}   
.loading span{   
    display: inline-block;   
    width: 8px;   
    height: 100%;   
    border-radius: 4px;   
    background: lightgreen;   
    animation: load 1s ease infinite;   
}   
@keyframes load{   
    0%,100%{   
        height: 20px;   
        background: lightgreen;   
    }   
    50%{   
        height: 30px;   
        margin: -5px 0;   
        background: lightblue;   
    }   
}   
.loading span:nth-child(2){   
    animation-delay:0.2s;   
}   
.loading span:nth-child(3){   
    animation-delay:0.4s;   
}   
.loading span:nth-child(4){   
    animation-delay:0.6s;   
}   
.loading span:nth-child(5){   
    animation-delay:0.8s;   
}

.text{
    font-size: 14px;
    color: #666;
    margin-left: 10px;
}
</style>